<template>
	<div>
		<div class="top">
			<el-button type="primary" @click="dialogVisible = true">添加</el-button>
			<!-- v-model="input2" -->
			<el-input placeholder="请输入检索内容" v-model="searchData">
				<template slot="append">
					<el-button @click='search'>搜索</el-button>
				</template>
			</el-input>
		</div>
		<!-- 表格 -->
		<el-table :data="memberList" style="width: 100%" height="520">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="memberName" label="用户名" width="200">
			</el-table-column>
			<el-table-column prop="role" label="权限" :filters="[{ text: '管理员', value: 1 }, { text: '超级管理员', value: 0 }]"
				:filter-method="filterTag">
				<template v-slot="scope">
					<el-tag :type="scope.row.role === 1 ? 'primary' : 'success'" disable-transitions>
						{{scope.row.role==0?"超级管理员":"管理员"}}
					</el-tag>
					<!-- <p>{{scope.row.role==0?"超级管理员":"管理员"}}</p> -->
				</template>
			</el-table-column>
			<el-table-column prop="" label="操作" width="180">
				<template slot-scope='scope'>
					<!-- <p>{{scope.row}}</p> -->
					<!-- 			<el-button type="primary" icon="el-icon-edit" circle></el-button>
					  <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button> -->
					<!-- 点击显示 修改框 -->
					<!-- <el-button type="primary" icon="el-icon-edit" @click="editorVisible=true"></el-button> -->

					<el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.row)"></el-button>
					<template>
						<el-popconfirm title="确定永久删除？" @confirm="del(scope.row.id)">
							<el-button type="primary" icon="el-icon-delete" slot="reference"></el-button>
						</el-popconfirm>
					</template>
					<!-- <el-button type="primary" icon="el-icon-delete" @click="del(scope.row.id)"></el-button> -->
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页 -->
		<!-- current-page当前页数  -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.page"
			:page-sizes="page.sizes" :page-size="page.rows" layout="total, sizes, prev, pager, next, jumper"
			:total="page.totle">
		</el-pagination>


		<!-- 添加管理员 -->
		<el-dialog title="添加管理员" :visible.sync="dialogVisible" width="30%">
			<el-form label-width="80px" :model="addMember">
				<el-form-item label="用户名">
					<el-input v-model="addMember.memberName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码 ">
					<el-input type="password" v-model="addMember.memberPass" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="权限">
					<!-- <el-select v-model="addMember.type" placeholder="请选择"> -->
					<el-select v-model="addMember.role" placeholder="请选择权限">
						<!-- el-option v-for="item in options" :key="item.value" :label="item.label"
							:value="item.value">
							</el-option> -->
						<el-option label="管理员" value="1"></el-option>
						<el-option label="超级管理员" value="0"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">添 加</el-button>
			</span>
		</el-dialog>
		<!-- 修改管理员 -->
		<el-dialog title="修改管理员" :visible.sync="editorVisible" width="30%">
			<el-form label-width="80px" :model="addMember">
				<el-form-item label="用户名">
					<el-input v-model="addMember.memberName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码 ">
					<el-input type="password" v-model="addMember.memberPass" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="权限">
					<!-- <el-select v-model="addMember.type" placeholder="请选择"> -->
					<el-select v-model="addMember.role" placeholder="请选择权限">
						<!-- el-option v-for="item in options" :key="item.value" :label="item.label"
							:value="item.value">
							</el-option> -->
						<el-option label="超级管理员" value="0"></el-option>
						<el-option label="管理员" value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editorVisible = false">取 消</el-button>
				<el-button type="primary" @click="editor">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 全局定义一个 _this 
	// var _this = ""; //定义空 在栈中分配空间
	var _this = null; //定义null 不分配空间
	export default {
		name: '',
		data() {
			return {
				page: {
					currentPage: 1,
					totle: 0,
					sizes: [4, 5, 6, 7, 14],
					rows: 7,
					page: 1
				},
				searchData: "",
				dialogVisible: false,
				editorVisible: false,
				memberList: [],
				memberListEnd: [],
				filterMemberListEnd: [],
				addMember: {
					memberName: "",
					memberPass: "",
					role: ""
				},
				options: [{
					value: '1',
					label: '管理员'
				}, {
					value: '0',
					label: '超级管理员'
				}],
				value: '',
				editId: '',
			}
		},

		created() {
			// vue 实例 已经完成
			_this = this;
			//此程序依靠此语法bug执行，请不要随意修改此bug
			_this.getMemberList()
		},
		// 第一次渲染完成
		mounted() {

		},
		methods: {
			// 筛选
			filterTag(value, row) {
				// console.log(value)
				// console.log(row)
				// console.log(row.role===value)
				return row.role === value;
			},
			// 搜索
			search() {
				console.log(_this.searchData);
				if (_this.searchData == "") {
					_this.$message.warning("查询条件不能为空！");
					return;
				}
				_this.memberListEnd = []
				_this.filterMemberListEnd = []
				_this.memberList.forEach((value, index) => {
					console.log(value)
					// if (value.role) {
					// 	if (value.role.indexOf(_this.searchData) >= 0) {
					// 		_this.memberList=list = _this.filterMemberListEnd.push(value)
					// 	}
					// }

				})
				// 页面数据改变重新统计数据数量和当前页
				// this.currentPage = 1
				// this.totalItems = this.filterTableDataEnd.length
				// 渲染表格,根据值
				// this.currentChangePage(this.filterTableDataEnd)
				// 页面初始化数据需要判断是否检索过
				// this.flag = true
				// let list = _this.memberList.forEach(value.index) => {
				// 	if (value.role) {
				// 		if (value.role.indexOf(_this.memberList) >= 0) {
				// 			this.filterTableDataEnd.push(value)
				// 		}
				// 	}
				// }
			},
			// 分页器
			handleSizeChange(val) {
				// 通过改变页面 每页显示几条 得到数据 重新渲染 
				console.log(`每页 ${val} 条`);
				// console.log(val)
				_this.page.rows = val
				_this.getMemberList()
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				_this.page.page = val
				_this.getMemberList()
			},
			showEdit(obj) {
				// console.log(obj.id)
				this.editId = obj.id
				this.addMember.memberName = obj.memberName
				this.addMember.memberPass = obj.memberPass
				// console.log(this.editId),
				this.editorVisible = true
			},
			getMemberList() {
				// console.log(sessionStorage.getItem("member"))
				// console.log(JSON.parse(sessionStorage.getItem("member")))
				let _this = this;
				_this.$axios({
					// url:`/api/v1/adminList?page=${_this.page.page}&pageSize=${_this.page.rows}`,
					// 在utils request.js 中配置了公共的地址头部
					url: "/api/v1/adminList",
					headers: {
						// JSON.parse 转换为对象模式
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "get",
					params: {
						// 当前页数
						// page: 1,
						page: _this.page.page,
						// pageSize: 10,
						// 传过去的每页显示几条数据
						pageSize: _this.page.rows,
					}
					//data  post put patch
					//params  get delete
				}).then(function(res) {
					// console.log(res)
					if (res.data.code == 200) {
						_this.memberList = res.data.data.list
						// 获取列表总数
						_this.page.totle = res.data.data.count
					} else {
						_this.memberList = []
					}

				})
			},
			// 删除
			del(id) {
				// console.log(id)
				// console.log(_this)
				let _this = this;
				_this.$axios({
					url: `/api/v1/adminDel?id=${id}`,
					// url:"/api/v1/adminDel",
					headers: {
						// JSON.parse 转换为对象模式
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "DELETE",
					// params: {
					// 	id:id,
					// }
					//data  post put patch
					//params  get delete
				}).then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "删除成功",
							type: "success",
							duration: 800,
							onClose: function() {
								_this.getMemberList()
							}

						})
					} else {
						_this.$message({
							message: "删除失败",
							type: "error",
							duration: 800
						})
					}

				})
			},
			// 添加
			add() {
				// console.log(this.addMember)
				// return;
				if (_this.addMember.memberName == "" || _this.addMember.memberPass == "") {
					_this.$message({
						message: "用户名或密码不能为空",
						type: 'error',
						duration: 800
					})
					return; //不往下执行
				}
				_this.$axios({
					url: "/api/v1/adminAdd",
					headers: {
						// JSON.parse 转换为对象模式
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "post",
					data: {
						"memberName": _this.addMember.memberName,
						"memberPass": _this.addMember.memberPass,
						// parseInt() 函数可解析一个字符串，并返回一个整数。
						"role": parseInt(_this.addMember.role),
					}
					//data  post put patch
					//params  get delete
				}).then(function(res) {
					// console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "添加成功",
							type: "success",
							duration: 800,
							onClose: function() {
								_this.addMember.memberName = "",
									_this.addMember.memberPass = "",
									_this.dialogVisible = false,
									_this.getMemberList()
							}
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: "error",
							duration: 800,
							onClose: function() {
								_this.addMember.memberName = "",
									_this.addMember.memberPass = ""
							}
						})
					}

				})
			},
			// 修改
			editor() {
				if (_this.addMember.memberName == "" || _this.addMember.memberPass == "") {
					_this.$message({
						message: "用户名或密码不能为空",
						type: 'error',
						duration: 800
					})
					return; //不往下执行
				}
				_this.$axios({
					url: "/api/v1/adminUpdate",
					headers: {
						// JSON.parse 转换为对象模式
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					method: "post",
					data: {
						"id": _this.editId,
						"memberName": _this.addMember.memberName,
						"memberPass": _this.addMember.memberPass,
						"role": _this.addMember.role,
					}
					//data  post put patch
					//params  get delete
				}).then(function(res) {
					// console.log(res)
					if (res.data.code == 200) {
						_this.$message({
							message: "修改成功",
							type: "success",
							duration: 800,
							onClose: function() {
								_this.addMember.memberName = "",
									_this.addMember.memberPass = "",
									_this.editorVisible = false,
									_this.getMemberList()
							}

						})
					} else {
						_this.$message({
							message: res.data.info,
							type: "error",
							duration: 800,
							onClose: function() {
								_this.addMember.memberName = "",
									_this.addMember.memberPass = ""
							}
						})
					}

				})
			}
		},


	}
</script>

<style scoped="scoped">
	.top {
		display: flex;
		background: #fff;
		padding: 10px 10px;
		box-sizing: border-box;
		/* border-bottom: 1px solid #ddd; */
		/* background-color: #f8f8f9; */

	}

	.top .el-input {
		width: 250px;
		margin: 0 20px;
		/* background-color: #f8f8f9; */
	}
</style>
<style>
	/* table */
	.el-table th {
		background-color: #f8f8f9;
	}

	.el-pagination {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.el-popover__reference-wrapper {
		margin-left: 10px;
	}
</style>
